<!--盘点统计-->
<template>
    <div class="total-purchase">
      <!-- 时间筛选 -->
      <!-- 修改 @tab-click 以传递 tab 的 name -->
      <el-tabs v-model="activeTime" class="time-tabs" @tab-click="tab => handleTimeTabClick(tab)">
        <el-tab-pane label="今日" name="today"></el-tab-pane>
        <el-tab-pane label="昨日" name="yesterday"></el-tab-pane>
        <el-tab-pane label="本周" name="week"></el-tab-pane>
        <el-tab-pane label="上周" name="lastWeek"></el-tab-pane>
        <el-tab-pane label="本月" name="month"></el-tab-pane>
        <el-tab-pane label="上月" name="lastMonth"></el-tab-pane>
      </el-tabs>
      <!-- 查询条件 -->
      <el-form label-width="100px" :inline="true" class="demo-form-inline" ref="searchref">
        <!-- 第一行 -->
        <div class="form-row">
          <el-form-item label="货品" prop="proc_code">
            <el-input v-model="searchform.proc_code" placeholder="请输入货物名称/编号"></el-input>
          </el-form-item>
          <el-form-item label="调拨单号" prop="ic_code">
            <el-input v-model="searchform.ic_code" placeholder="请输入调拨单号" style="width:200px;"></el-input>
          </el-form-item>
          <el-form-item label="调拨类型" prop="ic_type">
            <el-select v-model="searchform.ic_type" placeholder="请选择" style="width:200px;">
              <el-option 
                v-for="item in allotTypes" 
                :key="item.bus_id" 
                :label="item.bus_name" 
                :value="item.bus_id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="制单人" prop="create_name">
            <el-select v-model="searchform.create_name" placeholder="请选择" style="width:200px;">
              <el-option 
                v-for="item in users" 
                :key="item.user_id" 
                :label="item.user_name" 
                :value="item.user_name">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <!-- 第二行 -->
        <div class="form-row">
          <el-form-item label="货品类型" prop="type_id">
            <el-select v-model="searchform.type_id" placeholder="请选择" style="width:200px;">
              <el-option 
                v-for="item in productTypes" 
                :key="item.type_id" 
                :label="item.type_name" 
                :value="item.type_id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位" prop="proc_primary_unit">
            <el-select v-model="searchform.proc_primary_unit" placeholder="请选择" style="width:200px;">
              <el-option 
                v-for="item in units" 
                :key="item.dict_value" 
                :label="item.dict_label" 
                :value="item.dict_label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="仓库名称" prop="wh_id">
            <el-select v-model="searchform.wh_id" placeholder="请选择" style="width:200px;">
              <el-option 
                v-for="item in warehouses" 
                :key="item.wh_id" 
                :label="item.wh_name" 
                :value="item.wh_id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="经办人" prop="ic_user">
            <el-select v-model="searchform.ic_user" placeholder="请选择" style="width:200px;">
              <el-option 
                v-for="item in users" 
                :key="item.user_id" 
                :label="item.user_name" 
                :value="item.user_name">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <!-- 第三行 -->
        <div class="form-row">
          <el-form-item label="盘盈数量" prop="checkprofitNumMin">
            <el-input v-model="searchform.checkprofitNumMin" placeholder="请输入" style="width:91px;"></el-input>
            <span style="margin: 0 5px;">~</span>
            <el-input v-model="searchform.checkprofitNumMax" placeholder="请输入" style="width:91px;"></el-input>
          </el-form-item>
          <el-form-item label="盘亏数量" prop="checklossesNumMin">
            <el-input v-model="searchform.checklossesNumMin" placeholder="请输入" style="width:91px;"></el-input>
            <span style="margin: 0 5px;">~</span>
            <el-input v-model="searchform.checklossesNumMax" placeholder="请输入" style="width:91px;"></el-input>
          </el-form-item>
          <el-form-item label="盘盈金额" prop="checkprofitTotalMin">
            <el-input v-model="searchform.checkprofitTotalMin" placeholder="请输入" style="width:91px;"></el-input>
            <span style="margin: 0 5px;">~</span>
            <el-input v-model="searchform.checkprofitTotalMax" placeholder="请输入" style="width:91px;"></el-input>
          </el-form-item>
          <el-form-item label="盘亏金额" prop="checklossesTotalMin">
            <el-input v-model="searchform.checklossesTotalMin" placeholder="请输入" style="width:91px;"></el-input>
            <span style="margin: 0 5px;">~</span>
            <el-input v-model="searchform.checklossesTotalMax" placeholder="请输入" style="width:91px;"></el-input>
          </el-form-item>
        </div>
        <!-- 第四行：盘点结果 -->
        <div class="form-row">
          <el-form-item label="盘点结果" prop="stockStatus">
              <div>
                <el-checkbox-group v-model="searchform.icStatusArray" style="display: inline-block; margin-left: 10px;">
                    <el-checkbox 
                    v-for="item in icstatusdata" 
                    :key="item.dict_value" 
                    :label="item.dict_value"
                    style="margin-right: 20px;"
                    >
                    {{ item.dict_label }}
                    </el-checkbox>
                </el-checkbox-group>
              </div>
          </el-form-item>
        </div>
        <!-- 第五行：重置和查询按钮 -->
        <div class="form-row">
          <el-form-item>
            <el-button @click="Reset">重置</el-button>
            <el-button type="success" @click="Search">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
      <!-- 统计数据 -->
      <div class="statistics-container">
        <div class="stat-group">
            <div class="stat-item">
                <h3>{{ CTotal.checkCount }}</h3>
                <p>盘点次数</p>
            </div>
        </div>
        <div class="stat-group">
            <div class="stat-item">
                <h3>{{ CTotal.checkProfitNum }}</h3>
                <p>盘盈数量</p>
            </div>
            <div class="stat-item">
                <h3>{{ CTotal.checkLossesNum }}</h3>
                <p>盘亏数量</p>
            </div>
            <div class="stat-item">
                <h3>{{ CTotal.checkProfitTotal }}</h3>
                <p>盘盈成本总额</p>
            </div>
            <div class="stat-item">
                <h3>{{ CTotal.checkLossesTotal }}</h3>
                <p>盘亏成本总额</p>
            </div>
        </div>
      </div>
      <!-- 导出和刷新按钮 -->
      <div class="action-buttons">
        <el-button @click="Export">导出</el-button>
      </div>
      <el-table 
        :data="tableData" 
        :border="true" 
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <!-- 主表列保持不变 -->
        <el-table-column fixed type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="55" fixed></el-table-column>
        <el-table-column fixed prop="proc_code" label="货品编号" width="200"></el-table-column>
        <el-table-column fixed prop="proc_name" label="货品名称" width="100"></el-table-column>
        <el-table-column fixed prop="ic_status" label="盘点结果" width="200"></el-table-column>
        <el-table-column prop="proc_model" label="规格型号" width="200"></el-table-column>
        <el-table-column prop="proc_primary_unit" label="单位"></el-table-column>
        <el-table-column prop="ic_code" label="盘点单号" width="200"></el-table-column>
        <el-table-column prop="proc_primary_barcode" label="条码" width="200"></el-table-column>
        <el-table-column prop="wh_name" label="仓库名称" width="200"></el-table-column>
        <el-table-column prop="bookinventory" label="账面数量" width="200"></el-table-column>
        <el-table-column prop="check_num" label="盘点数量" width="200"></el-table-column>
        <el-table-column prop="checkprofit_num" label="盘盈数量" width="200"></el-table-column>
        <el-table-column prop="checklosses_num" label="盘亏数量" width="200"></el-table-column>
        <el-table-column prop="bookamount" label="账面金额" width="200"></el-table-column> 
        <el-table-column prop="checkprofit_total" label="盘赢金额" width="120"></el-table-column>
        <el-table-column prop="checklosses_total" label="盘亏金额" width="200"></el-table-column>
        <el-table-column prop="icd_price" label="成本单价" width="200"></el-table-column>
        <el-table-column prop="ic_user" label="经办人" width="200"></el-table-column>
        <el-table-column prop="create_name" label="制单人" width="200"></el-table-column>
        <el-table-column prop="create_time" label="制单时间" width="200"></el-table-column>
      </el-table>
      <!-- 分页控件 -->
       <!-- 页码 -->
       <!-- 修正：将 :total 绑定到 total 变量 -->
       <el-pagination 
         :page-size="10" 
         :pager-count="11" 
         layout="prev, pager, next, jumper" 
         :total="rows" 
         @current-change="handlePageChange" 
         style="float:right;margin-top:20px" 
         >
       </el-pagination>
    </div>
  </template>
  <script>
  import {ref,reactive,onMounted,computed} from 'vue'; // 移除了未使用的 computed
  import http from '../auth/index';
  import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
  import { useRouter } from 'vue-router';//路由 (如果未使用，也可以移除)
  import * as XLSX from 'xlsx';
  import qs from 'qs';
  export default {
  setup(){
    //表格数据
        const tableData=ref([]);
        const currentPage = ref(1);
        const total = ref(0); // 保留，用于分页
        //时间筛选
        const activeTime=ref('today');
        //查询条件
        const searchref=ref(null);
        const searchform = reactive({
          proc_code: '',              // 货品编号/名称 (对应后端 proc_code)
          ic_code: '',                // 盘点单号 (对应后端 ic_code)
          ic_type: '',                // 盘点类型 (对应后端 ic_type)
          create_name: '',            // 制单人 (对应后端 create_name)
          type_id: '',              // 货品类型 (对应后端 type_id)
          proc_primary_unit: '',      // 单位 (对应后端 proc_primary_unit)
          wh_id: '',                  // 仓库ID (对应后端 wh_id, 字符串传入)
          ic_user: '',                // 经办人 (对应后端 ic_user)

          // --- 日期范围 ---
          creates_date: [null, null], // 制单日期范围 (对应后端 createstartTime, createendTime)

          // --- 数值范围查询 ---
          checkprofitNumMin: null,    // 盘盈数量最小值 (对应后端 checkprofitNumMin)
          checkprofitNumMax: null,    // 盘盈数量最大值 (对应后端 checkprofitNumMax)
          checklossesNumMin: null,    // 盘亏数量最小值 (对应后端 checklossesNumMin)
          checklossesNumMax: null,    // 盘亏数量最大值 (对应后端 checklossesNumMax)
          checkprofitTotalMin: null,  // 盘盈金额最小值 (对应后端 checkprofitTotalMin)
          checkprofitTotalMax: null,  // 盘盈金额最大值 (对应后端 checkprofitTotalMax)
          checklossesTotalMin: null,  // 盘亏金额最小值 (对应后端 checklossesTotalMin)
          checklossesTotalMax: null,  // 盘亏金额最大值 (对应后端 checklossesTotalMax)

          // --- 状态筛选 ---
          icStatusArray: [],          // 盘点结果 (对应后端 icStatusArray)
        });
        const icstatusdata = ref([]);
        const warehouses = ref([]);      // 仓库列表
        const productTypes = ref([]);    // 货品类型
        const allotTypes = ref([]);      // 调拨类型
        const units = ref([]);           // 单位列表
        const rows = ref(0);             // 总行数
        // 获取仓库列表
        function GetWarehouses() {
          http.get("/Warehouse/GetWarehouses")
            .then(res => {
              warehouses.value = res.data;
            })
            .catch(err => {
              console.log(err);
              ElMessage.error('仓库加载失败');
            });
        }
        // 获取货品类型
        function GetProductTypes() {
          http.get("/ProductType/GetAllProductTypes")
            .then(res => {
              productTypes.value = res.data;
            })
            .catch(err => {
              console.log(err);
              ElMessage.error('货品类型加载失败');
            });
        }
        // 获取调拨类型
        function GetAllotTypes() {
          http.get("/BusinessType/GetBusinessTypes", {
            params: { field: '调拨' }
          })
          .then(res => {
            allotTypes.value = res.data;
          })
          .catch(err => {
            console.log(err);
            ElMessage.error('调拨类型加载失败');
          });
        }
        // 获取单位列表
        function GetUnits() {
          http.get("/DictData/GetAllDictDataBytype", {
            params: { typeid: 8 } // 8是单位的字典ID
          })
          .then(res => {
            units.value = res.data;
            console.log('单位',units.value);
          })
          .catch(err => {
            console.log(err);
            ElMessage.error('单位加载失败');
          });
        }
        //查询盘点结果
        function Geticstatus() {
          http.get("/DictData/GetAllDictDataBytype", {
              params: {
                typeid: 7
              }
          }).then(res => {
              console.log("盘点结果:", res.data); // 调试用
              icstatusdata.value = res.data;
          }).catch(err => {
              console.log(err);
              ElMessage.error('数据加载失败');
          });
        }
        //查询统计总量
        const CTotal=ref([]);
        
        // 查询数据
        function All() {
          const createsstartTime = searchform.creates_date && searchform.creates_date[0] 
              ? new Date(searchform.creates_date[0]).toISOString() : '';
            const createsendTime = searchform.creates_date && searchform.creates_date[1] 
              ? new Date(searchform.creates_date[1]).toISOString() : '';
          // 构建参数对象
          const params = {
            CurrentPage: currentPage.value,
            // --- 基本查询字段 ---
            proc_code: searchform.proc_code || null,
            ic_code: searchform.ic_code || null,
            ic_type: searchform.ic_type || null,
            create_name: searchform.create_name || null,
            type_id: searchform.type_id || null,
            proc_primary_unit: searchform.proc_primary_unit || null,
            wh_id: searchform.wh_id ? Number(searchform.wh_id) : null, // 转换为数字
            ic_user: searchform.ic_user || null,
            // --- 日期范围 ---
            // 假设 searchform.creates_date 对应 createstartTime 和 createendTime
            createstartTime: createsstartTime,
            createendTime: createsendTime,
            // --- 范围查询字段 ---
            checkprofitNumMin: searchform.checkprofitNumMin,
            checkprofitNumMax: searchform.checkprofitNumMax,
            checklossesNumMin: searchform.checklossesNumMin,
            checklossesNumMax: searchform.checklossesNumMax,
            checkprofitTotalMin: searchform.checkprofitTotalMin,
            checkprofitTotalMax: searchform.checkprofitTotalMax,
            checklossesTotalMin: searchform.checklossesTotalMin,
            checklossesTotalMax: searchform.checklossesTotalMax,
            icStatusArray: searchform.icStatusArray && searchform.icStatusArray.length > 0 ? searchform.icStatusArray : null 
          };
  
          // 使用 qs 序列化参数（数组格式化为重复键名）
          const config = {
            params,
            paramsSerializer: params =>
              qs.stringify(params, { arrayFormat: 'repeat', skipNulls: true })
          };

          // 同时发起两个请求
          Promise.all([
            http.get("/Check_h/Gettotal", config),  // 总量请求
            http.get("/Check_d/GetCheckTJResult", config)  // 明细请求
          ])
          .then(([summaryRes, detailRes]) => {
            // 处理总量数据
            CTotal.value = summaryRes.data; // 根据实际响应结构调整
            console.log("汇总数据:", CTotal.value);
            
            // 处理明细数据
            tableData.value = detailRes.data.list;
            total.value = detailRes.data.rows;
            console.log("明细数据:", tableData.value);
          })
          .catch(err => {
            console.error(err);
            ElMessage.error('数据加载失败');
          });
        }
        
        // 修改 Reset 函数，增加时间标签重置
        function Reset() {
          // 清空所有查询条件
          Object.keys(searchform).forEach(key => {
            if (Array.isArray(searchform[key])) {
              searchform[key] = [];
            } else {
              searchform[key] = '';
            }
          });
          
          // 重置时间标签
          activeTime.value = 'today';
          
          // 重置日期范围
          searchform.date = [null, null];
          // 重置制单日期范围
          searchform.creates_date = [null, null];
          
          // 立即执行查询（显示今天的数据）
          handleTimeTabClick();
        }
  
        // 查询
        function Search() {
          currentPage.value = 1; // 查询时重置到第一页
          All();
        }
        //查询所有用户
        const users=ref([]);
        function GetUsers(){
            return http.get("/User/GetAllUser")
            .then(res=>{
                users.value=res.data;
            }).catch(err=>{
                console.log(err);
            })
        }
        //分页
        function handlePageChange(page) {
          currentPage.value = page;
          All();
        }
        //时间筛选
        function handleTabChange(name) {
          activeTime.value =name;
          console.log(activeTime.value);
          currentPage.value = 1; // 切换时间筛选时重置到第一页
          All();
        }
        //选中的数据 (保留，因为导出功能依赖)
        const selectedRows = ref([]);
        function handleSelectionChange(selection) {
          selectedRows.value = selection;
        }
  
        //导出
        function Export() {
          // 如果没选中任何行，提示用户并返回 (使用您提供的代码)
          if (!selectedRows.value.length) {
            ElMessage.warning('请先选择要导出的单据！');
            return;
          }

          // 如果有选中行，则导出选中的数据
          let dataToExport = selectedRows.value; // selectedRows.value 已经是 tableData 中的对象

          // 如果经过筛选后仍无数据可导出 (理论上 selectedRows 有值时不会触发，但保留健壮性检查)
          if (!dataToExport || dataToExport.length === 0) {
            ElMessage.warning('没有可导出的数据。');
            return;
          }

          // 定义与表格列一致的表头
          const header = [
            '货品编号', '货品名称', '盘点结果', '规格型号', '单位',
            '盘点单号', '条码', '仓库名称', '账面数量', '盘点数量', '盘盈数量',
            '盘亏数量', '账面金额', '盘赢金额', '盘亏金额', '成本单价',
            '经办人', '制单人', '制单时间'
          ];

          // 根据表头定义，从 dataToExport 中提取对应的数据
          // 注意：这里的字段名需要与 tableData 中的实际字段名一致
          const data = dataToExport.map((row, index) => [
            row.proc_code,
            row.proc_name,
            row.ic_status,
            row.proc_model,
            row.proc_primary_unit,
            row.ic_code,
            row.proc_primary_barcode,
            row.wh_name,
            row.bookinventory,
            row.check_num,
            row.checkprofit_num,
            row.checklosses_num,
            row.bookamount,
            row.checkprofit_total,
            row.checklosses_total,
            row.icd_price,
            row.ic_user,
            row.create_name,
            row.create_time
          ]);

          // 生成 worksheet 和 workbook
          const ws = XLSX.utils.aoa_to_sheet([header, ...data]);
          const wb = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(wb, ws, '盘点统计');
          
          // 导出文件 (文件名可以更具描述性)
          const exportFileName = '盘点统计_选中数据.xlsx';
          XLSX.writeFile(wb, exportFileName);

          // 可选：成功导出后给出提示
          ElMessage.success(`成功导出 ${dataToExport.length} 条数据。`);
        }
  
        // 修改后的时间筛选功能
        function handleTimeTabClick(tab) {
          // 直接从事件参数获取当前点击的标签名
          const name = tab.props.name;
          
          const now = new Date();
          let start, end;
  
          switch (name) {
            case 'today': // 今天
              start = new Date(now.getFullYear(), now.getMonth(), now.getDate());
              end = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
              break;
            case 'yesterday': // 昨天
              start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
              end = new Date(now.getFullYear(), now.getMonth(), now.getDate());
              break;
            case 'week': // 本周
              const day = now.getDay() || 7;
              start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - day + 1);
              end = new Date(now.getFullYear(), now.getMonth(), now.getDate() + (7 - day) + 1);
              break;
            case 'lastWeek': // 上周
              const lastWeekDay = now.getDay() || 7;
              start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - lastWeekDay - 6);
              end = new Date(now.getFullYear(), now.getMonth(), now.getDate() - lastWeekDay + 1);
              break;
            case 'month': // 本月
              start = new Date(now.getFullYear(), now.getMonth(), 1);
              end = new Date(now.getFullYear(), now.getMonth() + 1, 1);
              break;
            case 'lastMonth': // 上月
              start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
              end = new Date(now.getFullYear(), now.getMonth(), 1);
              break;
            default:
              start = null;
              end = null;
          }
  
          // 设置日期范围
          searchform.creates_date = [start, end];
          
          // 立即执行查询
          Search();
        }
  
        //挂载
        onMounted(()=>{
          GetWarehouses();
          GetProductTypes();
          GetAllotTypes();
          GetUnits();
          Geticstatus();
          GetUsers(); // 确保获取用户数据
          activeTime.value = 'today';
          const now = new Date();
          const start = new Date(now.getFullYear(), now.getMonth(), now.getDate());
          const end = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
          searchform.creates_date = [start, end]; // 设置为今天
          Search(); // 触发查询
        })
      return {
        // 返回给模板使用的变量和函数
        rows,
        icstatusdata,
        handleTimeTabClick,
        warehouses,
        productTypes,
        allotTypes,
        units,
        searchform,
        CTotal,
        tableData,
        currentPage,
        total, // 返回 total 供分页使用
        activeTime,
        searchref,
        Reset,
        users, // 返回 users 供下拉使用
        handlePageChange,
        handleTabChange,
        Search,
        Export,
        selectedRows, // 返回 selectedRows 供导出使用
        handleSelectionChange // 返回 handleSelectionChange 供表格使用
      }
    }
  };
  </script>
  <style scoped>
  .form-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  /* 添加一些间距和对齐样式 */
  .el-table .cell {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* 或者针对货品明细列特别处理 */
  .el-table [label="货品明细"] .cell {
    padding: 0;
  }
  .el-table [label="货品明细"] .cell > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px 0;
  }
  .form-row .el-form-item {
    margin-right: 10px;
    margin-bottom: 10px;
  }
    .statistics-container {
    display: flex;
    margin-bottom: 20px;
    gap: 20px;
    } 
    .stat-group {
    display: flex;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 15px;
    min-width: 0;
    text-align: center;      /* 添加此行 */
    justify-content: center; /* 如果 .stat-group 内部是 flex 布局，也居中子元素 */
    align-items: center;     /* 如果 .stat-group 内部是 flex 布局，也垂直居中子元素 */
    }
    .stat-group:first-child {
    flex: 0 0 30%;
    }
    .stat-group:last-child {
    flex: 0 0 65%;
    display: flex; /* 内部子元素横向排列 */
    justify-content: space-around; /* 子元素在主轴上均匀分布 */
    align-items: center; /* 子元素在交叉轴上居中 */
    }
  .stats-box {
    display: flex;
    justify-content: space-around;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
  }
  .stat-item h3 {
    color: #409eff;
    font-size: 24px;
    margin: 0;
  }
  .stat-item p {
    color: #606266;
    font-size: 14px;
    margin: 5px 0 0;
  }
  .action-buttons {
    text-align: left;
    margin-bottom: 20px;
  }
  /* 调整表格样式 */
  .el-table {
    margin-top: 20px;
  }
  /* 货品明细列标题居中 */
  .el-table .el-table__header-wrapper .el-table__header .gutter:last-of-type {
    display: none;
  }
  </style>